<template>
    <div class="data-details">
        <div class="data-left">
            <div class="charts-box visits">
                <div class="charts-search visit-type">
                    <el-select 
                        v-model="searchContent[0].data_type" 
                        placeholder="请选择" 
                        size="small"
                        popper-class="popper-class">
                        <el-option
                            v-for="item in dataTypeArr[0].value"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!--div class="store-traffic"  @click="handleRedirect('storeTraffic', 'storeTraffic')">店铺流量</div-->
                </div>
                <div :class="{vis1: true, visible: searchContent[0].data_type == 1}">
                    <div class="charts-title">
                        <svg t="1624418433492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5168" width="200" height="200"><path d="M501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM415.730423 585.125461l189.629895 0c162.314783 0 293.880237 129.387859 293.880237 289.057395l0 18.622126c0 62.922075-131.593084 65.313541-293.880237 65.313541L415.730423 958.118524c-162.319899 0-293.880237-0.092098-293.880237-65.313541l0-18.622126C121.852232 714.51332 253.411547 585.125461 415.730423 585.125461L415.730423 585.125461 415.730423 585.125461z" p-id="5169" fill="#4293F4"></path></svg>
                        访问统计
                        <div class="charts-date-type">
                            <date-picker @getData="getVisitsUvData" :showParticleSize="true"></date-picker>
                        </div>
                    </div>
                    <div class="charts-content" @click="handleRedirect('behavior', 'registryAccess', { dateInterval: dataArrUv.dateInterval})">
                        <charts :dataArr="dataArrUv" container="c1-uv"></charts>
                    </div>
                </div>
                <div :class="{vis1: true, visible: searchContent[0].data_type == 4}">
                    <div class="charts-title">
                        <svg t="1624418433492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5168" width="200" height="200"><path d="M501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM415.730423 585.125461l189.629895 0c162.314783 0 293.880237 129.387859 293.880237 289.057395l0 18.622126c0 62.922075-131.593084 65.313541-293.880237 65.313541L415.730423 958.118524c-162.319899 0-293.880237-0.092098-293.880237-65.313541l0-18.622126C121.852232 714.51332 253.411547 585.125461 415.730423 585.125461L415.730423 585.125461 415.730423 585.125461z" p-id="5169" fill="#4293F4"></path></svg>
                        访问统计
                        <div class="charts-date-type">
                            <date-picker @getData="getVisitsPvData" :showParticleSize="true"></date-picker>
                        </div>
                    </div>
                    <div class="charts-content" @click="handleRedirect('behavior', 'registryAccess', {dateInterval: dataArrPv.dateInterval})">
                        <charts :dataArr="dataArrPv" container="c1-pv"></charts>
                    </div>
                </div>
                <div :class="{vis1: true, visible: searchContent[0].data_type == 2}">
                    <div class="charts-title">
                        <!--svg t="1624420383062" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14453" width="200" height="200"><path d="M729.6 560c-80 0-147.2-64-147.2-147.2s64-147.2 147.2-147.2 147.2 64 147.2 147.2-67.2 147.2-147.2 147.2zM764.8 588.8h-12.8c-19.2 0-32 12.8-32 32 0 0 76.8 268.8 121.6 268.8h102.4c32 0 60.8-25.6 60.8-60.8 3.2-96-92.8-240-240-240z" p-id="14454" fill="#F4B342"></path><path d="M377.6 499.2C275.2 499.2 192 416 192 316.8s83.2-182.4 182.4-182.4 182.4 83.2 182.4 182.4-80 182.4-179.2 182.4zM665.6 889.6H86.4c-38.4 0-70.4-32-70.4-70.4 0-124.8 121.6-307.2 307.2-307.2h99.2c188.8 0 307.2 182.4 307.2 307.2 6.4 38.4-25.6 70.4-64 70.4z" p-id="14455" fill="#F4B342"></path></svg-->
                        <svg t="1624418433492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5168" width="200" height="200"><path d="M501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM415.730423 585.125461l189.629895 0c162.314783 0 293.880237 129.387859 293.880237 289.057395l0 18.622126c0 62.922075-131.593084 65.313541-293.880237 65.313541L415.730423 958.118524c-162.319899 0-293.880237-0.092098-293.880237-65.313541l0-18.622126C121.852232 714.51332 253.411547 585.125461 415.730423 585.125461L415.730423 585.125461 415.730423 585.125461z" p-id="5169" fill="#4293F4"></path></svg>
                        访问统计
                        <div class="charts-date-type">
                            <date-picker @getData="getAddUpData" :showParticleSize="true"></date-picker>
                        </div>
                    </div>
                    <div class="charts-content" @click="handleRedirect('behavior', 'registryAccess', {dateInterval: dataArr2.dateInterval})">
                        <charts-bar :dataArr="dataArr2" container="c2" _particleSize="day" valueType="1"></charts-bar>
                    </div>
                </div>
            </div>
            <div class="charts-box wechatAll">
                <div class="charts-title">
                    <svg t="1628217123973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1364" width="200" height="200"><path d="M700.8256 701.2864c26.88 26.9312 59.392 43.1104 95.4368 53.248l12.1344 3.1232c25.2928 4.608 38.5536 27.648 39.68 51.2 0 27.648-20.1216 51.2-47.7696 55.2448-26.4192 3.4304-54.0672-13.2608-59.8016-39.7312-8.0384-40.8064-25.344-76.4928-55.2448-106.3936-3.4304-3.4816-1.1264-10.9568-2.304-16.6912l13.4656-1.024c2.048 0 3.584 0.256 4.4032 1.024z m48.896-521.216c56.32 59.8016 87.4496 130.56 88.576 212.8384a109.2096 109.2096 0 0 0-45.4656-9.728h-2.304a109.2096 109.2096 0 0 0-104.0896 96.6144 120.2688 120.2688 0 0 0 0 28.7744c-20.1728 20.1216-44.9024 32.768-75.3664 37.9392h-0.6144a105.1648 105.1648 0 0 0-44.288 184.6784 416.3584 416.3584 0 0 1-106.4448 17.8688 481.3824 481.3824 0 0 1-137.472-13.2608 50.0224 50.0224 0 0 0-22.4256 2.304l-104.1408 51.2c-13.2608 6.912-25.344 8.0384-36.864-1.1264-10.9056-8.0896-12.032-20.1728-10.9056-34.56 4.608-28.7232 8.0896-57.4976 10.9568-86.272a31.1296 31.1296 0 0 0-8.0896-18.944c-45.4144-45.5168-84.5312-95.5392-104.0896-158.8224-36.864-125.44-3.4816-232.96 87.4496-322.7648C300.3904 3.9936 590.848 11.4688 749.7216 180.0704z m207.104 414.7712c28.7744 3.4816 50.0224 26.4704 50.0224 55.2448 0 27.648-16.6912 50.0224-44.288 55.2448-33.792 6.144-64.3072 20.48-89.7024 42.496l-9.216 8.704c-5.7856 5.7344-14.3872 10.9056-20.1728 2.304-2.304-4.608-1.1264-15.5648 2.304-18.9952a186.0096 186.0096 0 0 0 51.2-100.7104 54.784 54.784 0 0 1 59.8528-44.288z m-215.1936-51.7632c-1.1264 5.7344 1.1776 14.336-2.304 17.8176-28.7232 28.7744-44.288 63.2832-52.3264 103.0144-5.7856 28.7232-32.256 45.4144-59.8528 40.8064-27.648-4.608-48.3328-28.7744-48.3328-55.808 0-24.1664 17.8688-46.592 41.984-51.2a190.4128 190.4128 0 0 0 103.0144-52.3264c3.4304-3.4816 12.0832-2.304 17.8176-2.304z m51.2-108.1856c25.344 0 48.896 16.6912 54.1184 43.1616 6.8608 39.68 24.1664 74.24 52.3264 102.9632 3.4816 3.4816 1.1776 13.2608 2.304 18.9952-6.912 0-15.5136 2.304-18.944-1.1264-28.8256-29.952-64.512-45.4656-104.192-54.0672a53.6576 53.6576 0 0 1-40.8064-58.7264c3.9936-28.7232 26.4704-50.0224 55.1936-51.2z" p-id="1365" fill="#31E5B5"></path></svg>
                    企微客户累计数
                    <div class="charts-date-type">
                        <date-picker @getData="getWechatAllData" :showParticleSize="true" :nowDay="false"></date-picker>
                    </div>
                </div>
                <div class="charts-content" @click="handleRedirect('wechatData', 'wechatDataCustomer', {dateInterval: dataArr10.dateInterval})">
                    <charts-bar :dataArr="dataArr10" container="c10" _particleSize="day" valueType="1"></charts-bar>
                </div>
            </div>
            <div class="charts-box video-rank">
                <div class="charts-title">
                    <svg t="1624420517560" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1665" width="200" height="200"><path d="M511.488 0A512 512 0 1 0 1024 512a512 512 0 0 0-512.512-512z m218.112 724.114286L460.8 562.834286v-307.2h76.8V524.434286l230.4 136.704z" p-id="1666" fill="#B9A1FF"></path></svg>
                    企微客户互动人数排名TOP5
                    <div class="charts-date-type">
                        <date-picker @getData="getWechatRankData" :nowDay="false"></date-picker>
                    </div>
                </div>
                <div class="charts-content" @click="handleRedirect('wechatData', 'wechatDataInteraction', {dateInterval: dataArr3.dateInterval})">
                    <charts-bar :dataArr="dataArr3" container="c3" _particleSize='sort'></charts-bar>
                </div>
            </div>
        </div>
        <div class="data-middle">
            <div class="charts-box core-data">
                <div class="charts-title">
                    <svg t="1624420639187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5027" width="200" height="200"><path d="M479.651244 129.21799C250.383584 129.21799 64.523549 315.075978 64.523549 544.347732c0 229.265614 185.860035 415.127695 415.127695 415.127695 229.27073 0 415.127695-185.862082 415.127695-415.127695L479.651244 544.347732 479.651244 129.21799zM544.345686 64.523549l0 415.129742 415.129742 0C959.475428 250.381537 773.616416 64.523549 544.345686 64.523549z" p-id="5028" fill="#29E242"></path></svg>
                    核心数据 
                    <el-tooltip effect="dark" placement="top" popper-class="bi-tooltip">
                        <div slot="content">指标值里的环比定义：<br>近7天环比表示近7天值环比近8-14天值的百分比；<br>近30天环比表示近30天值环比近31-60天值的百分比；<br>计算公式：<br>(近7天合计-近8-14天合计) / 近8-14天合计=近7天环比；<br>(近30天合计-近31-60天合计) / 近31-60天合计=近30天环比；<br></div>
                        <i class="el-icon-question"></i></el-tooltip>
                    <!--div class="charts-date-type">
                        <date-picker @getData="getMapData"></date-picker>
                    </div-->
                </div>
                <!--div class="charts-search">
                    <el-select 
                        v-model="searchContent[3].data_type" 
                        placeholder="请选择" 
                        size="small"
                        popper-class="popper-class"
                        @change="handleChange">
                        <el-option
                            v-for="item in dataTypeArr[3].value"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div-->
                <!--div class="charts-content">
                    <charts-map :dataArr="dataArr4" container="c4" @getData="getMapData"></charts-map>
                </div-->
                <div class="core-data-content">
                    <div class="core-data-item" v-for="(item, index) of dataArr12" :key="index">
                        <div class="core-data-item__header">
                            <div class="core-data-item__label">{{item.label}}</div>
                            <div class="core-data-item__date">{{item.prefix}} {{item.date}}</div>
                        </div>
                        <div :class="['core-data-item__content', `type-${item.type}`]">
                            <div class="item-total" v-html="`${formatter2(item.num)}<font>${item.dw}</font>`"></div>
                            <div class="item-date-list" v-if="item.type == 1">
                                <div class="item-date-list-box">
                                    <div><span>近7天{{item.label2}}</span><span :class="{'color-danger': parseFloat(item.seven_days) > 0}" v-html="formatter2(item.seven_days)"></span></div>
                                    <div><span>近30天{{item.label2}}</span><span :class="{'color-danger': parseFloat(item.thirty_days) > 0}" v-html="formatter2(item.thirty_days)"></span></div>
                                </div>
                                <div class="item-date-list-box">
                                    <div><span>环比</span><span :class="{'color-danger': parseFloat(item.seven_rate) > 0}">{{formatter2(item.seven_rate)}}%</span></div>
                                    <div><span>环比</span><span :class="{'color-danger': parseFloat(item.thirty_rate) > 0}">{{formatter2(item.thirty_rate)}}%</span></div>
                                </div>
                            </div>
                            <div class="item-date-list" v-else>
                                <div><span>日环比</span><span :class="{'color-danger': parseFloat(item.day) > 0}">{{formatter2(item.day)}}%</span></div>
                                <div><span>上周日平均环比</span><span :class="{'color-danger': parseFloat(item.week) > 0}">{{formatter2(item.week)}}%</span></div>
                                <div><span>上月日平均环比</span><span :class="{'color-danger': parseFloat(item.month) > 0}">{{formatter2(item.month)}}%</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="charts-box wechat-add">
                <div class="charts-title">
                    <svg t="1624420706633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6957" width="200" height="200"><path d="M51.2 307.2m51.2 0l102.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-102.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z" p-id="6958" fill="#F4B342"></path><path d="M409.6 51.2m51.2 0l102.4 0q51.2 0 51.2 51.2l0 716.8q0 51.2-51.2 51.2l-102.4 0q-51.2 0-51.2-51.2l0-716.8q0-51.2 51.2-51.2Z" p-id="6959" fill="#F4B342"></path><path d="M768 204.8m51.2 0l102.4 0q51.2 0 51.2 51.2l0 563.2q0 51.2-51.2 51.2l-102.4 0q-51.2 0-51.2-51.2l0-563.2q0-51.2 51.2-51.2Z" p-id="6960" fill="#F4B342"></path></svg>
                    商家访问量排名
                    <el-radio-group 
                        class="charts-radio-group"
                        v-model="searchContent[4].data_type" 
                        size="small" 
                        @change="handleWechatAddChange">
                        <el-radio-button label="desc">正序</el-radio-button>
                        <el-radio-button label="asc">倒序</el-radio-button>
                    </el-radio-group>
                    <div class="charts-date-type">
                        <date-picker @getData="getStoreRankData" _dateType='visit_date_30' :nowDay="false"></date-picker>
                    </div>
                </div>
                <div class="charts-content" @click="handleRedirect('storeTraffic', 'storeTraffic', {dateInterval: dataArr5.dateInterval})">
                    <charts-bar :dataArr="dataArr5" container="c5" _particleSize='sort'></charts-bar>
                </div>
            </div>
        </div>
        <div class="data-right">
            <div class="charts-box portrait">
                <div class="charts-title">
                    <svg t="1624420880913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19711" width="200" height="200"><path d="M646.4 153.6c0 49.92 39.68 89.6 89.6 89.6s89.6-39.68 89.6-89.6H870.4c49.92 0 89.6 39.68 89.6 89.6v89.6H64v-89.6c0-49.92 39.68-89.6 89.6-89.6h44.8c0 49.92 39.68 89.6 89.6 89.6s89.6-39.68 89.6-89.6h268.8zM960 377.6V870.4c0 49.92-39.68 89.6-89.6 89.6H153.6c-49.92 0-89.6-39.68-89.6-89.6V377.6h896zM288 64C312.32 64 332.8 84.48 332.8 108.8V153.6c0 24.32-20.48 44.8-44.8 44.8S243.2 177.92 243.2 153.6V108.8C243.2 84.48 263.68 64 288 64z m448 0C760.32 64 780.8 84.48 780.8 108.8V153.6c0 24.32-20.48 44.8-44.8 44.8S691.2 177.92 691.2 153.6V108.8C691.2 84.48 710.4 64 736 64zM435.2 793.6c17.92 17.92 46.08 17.92 64 0l215.04-215.04c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L467.2 736l-111.36-111.36c-12.8-12.8-32-12.8-44.8 0s-12.8 32 0 44.8L435.2 793.6z" fill="#A142F4" p-id="19712"></path></svg>
                    客户画像
                    <el-radio-group 
                        class="charts-radio-group"
                        v-model="searchContent[5].data_type" 
                        size="small" 
                        @change="handlePortraitChange">
                        <el-radio-button label="2">年龄</el-radio-button>
                        <el-radio-button label="1">性别</el-radio-button>
                    </el-radio-group>
                    <div class="charts-date-type">
                        <date-picker @getData="getPortraitData" _dateType='visit_date_30' :nowDay="false"></date-picker>
                    </div>
                </div>
                <div class="charts-content" style="position: relative;">
                    <charts-pie :dataArr="dataArr6" container="c6"></charts-pie>
                    <div v-if="showMsg" class="errorMsg">微信端数据还在统计中，请稍后刷新查看...</div>
                </div>
            </div>
            <div class="charts-box operate">
                <div class="charts-title">
                    <svg t="1624420880913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19711" width="200" height="200"><path d="M646.4 153.6c0 49.92 39.68 89.6 89.6 89.6s89.6-39.68 89.6-89.6H870.4c49.92 0 89.6 39.68 89.6 89.6v89.6H64v-89.6c0-49.92 39.68-89.6 89.6-89.6h44.8c0 49.92 39.68 89.6 89.6 89.6s89.6-39.68 89.6-89.6h268.8zM960 377.6V870.4c0 49.92-39.68 89.6-89.6 89.6H153.6c-49.92 0-89.6-39.68-89.6-89.6V377.6h896zM288 64C312.32 64 332.8 84.48 332.8 108.8V153.6c0 24.32-20.48 44.8-44.8 44.8S243.2 177.92 243.2 153.6V108.8C243.2 84.48 263.68 64 288 64z m448 0C760.32 64 780.8 84.48 780.8 108.8V153.6c0 24.32-20.48 44.8-44.8 44.8S691.2 177.92 691.2 153.6V108.8C691.2 84.48 710.4 64 736 64zM435.2 793.6c17.92 17.92 46.08 17.92 64 0l215.04-215.04c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L467.2 736l-111.36-111.36c-12.8-12.8-32-12.8-44.8 0s-12.8 32 0 44.8L435.2 793.6z" fill="#4293F4" p-id="19712"></path></svg>
                    运营数据
                    <div class="charts-date-type">
                        <date-picker @getData="getOperateData" :showParticleSize="true" :nowDay="false"></date-picker>
                    </div>
                </div>
                <div class="charts-content" @click="handleRedirect('transaction', 'transactionData', {dateInterval: dataArr7.dateInterval})">
                    <div class="charts-content-box">
                        <charts :dataArr="dataArr7" container="c7"></charts>
                    </div>
                    <div class="charts-content-box">
                       <charts :dataArr="dataArr8" container="c8"></charts>
                    </div>
                    <div class="charts-content-box">
                        <div @click.stop>
                            <el-radio-group 
                                class="charts-radio-group"
                                v-model="searchContent[6].data_type" 
                                size="small">
                                <el-radio-button label="4">兑换量</el-radio-button>
                                <el-radio-button label="5">累计金额</el-radio-button>
                            </el-radio-group>
                        </div>
                        <charts-bar :dataArr="dataArr9" container="c9" :class="{vis1: true, visible: searchContent[6].data_type == 4}"></charts-bar>
                        <charts :dataArr="dataArr11" container="c11"  :class="{vis1: true, visible: searchContent[6].data_type == 5}" valueType="1"></charts>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { formatterNumber, dateFormatter, getWeek, getChartMin, compare } from '@/common/js/util.js'
import datePicker from './datePicker.vue';
import charts from './charts.vue';
import chartsBar from './charts-bar.vue';
import chartsMap from './charts-map.vue';
import chartsPie from './charts-pie.vue';
export default {
    components: { datePicker, charts, chartsBar, chartsMap, chartsPie },
    data() {
        return {
            dataTypeArr: [
                {label: '访问统计', value: [
                    {label: '访问次数', value: 4},
                    {label: '访问人数', value: 1},
                    {label: '累计人数', value: 2}
                ]},
                {label: '累计数', value: 1},
                {label: '互动人数', value: 1},
                {label: '用户分布', value: [
                    {label: '用户数', value: 1},
                    {label: '新增用户', value: 2},
                ]},
                {label: '访问排名', value: [
                    {label: '访问量', value: 'desc'},
                    {label: '访问量', value: 'asc'},
                ]},
                {label: '客户画像', value: [
                    {label: '性别', value: 1},
                    {label: '年龄', value: 2},
                ]},
                {label: '运营数据', value: null}
            ],
            searchContent: [
                { data_type: 4 },
                { data_type: 1 },
                { data_type: 1 },
                { data_type: 1 },
                { data_type: "desc" },
                { data_type: 2 },
                { data_type: 4 },
            ],
            showMsg: false,
            dataArrPv: {
                chart: {
                    type: 'areaspline'
                },
                tooltip: {
                    valueSuffix: ' 次' // 数据列 y 值得后缀字符串
                },
                yAxis: {
                    tickAmount: 5,
                },
                markerEnabled: true,
                series:  []
            },
            dataArrUv: {
                chart: {
                    type: 'areaspline'
                },
                tooltip: {
                    valueSuffix: ' 人'
                },
                yAxis: {
                    tickAmount: 5,
                },
                markerEnabled: true,
                series:  []
            },
            dataArr2: {
                tooltip: {
                    enabled: true,
                    valueSuffix: ' 人'
                },
                series:  []
            },
            dataArr3: {
                chart: {
                    type: 'bar'
                },
                yAxis: {
                    lineWidth: 0,
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    }
                },
                xAxis: [{
                    type: "linear",
                    lineWidth: 0,
                    tickWidth: 0,
                    tickLength: 5, // 刻度线长度
                    labels: {
                        useHTML: true,
                        formatter: function(e) {
                            const arr = e.chart.options.series[0].data[e.pos];
                            if(arr[1] <= 0) return ''
                            return `<div class="labels-box"><div class="sort"><i class="i${e.pos + 1}"></i></div></div>`
                        },
                        x: -5, // 标签与柱形间距
                    },
                    tickInterval: 1
                },{
                    type: 'linear',
                    linkedTo: 0,
                    offset: -15,
                    lineWidth: 0,
                    tickLength: 0,
                    labels: {
                        enabled: true,
                        align: 'left',
                        y: -14,
                        useHTML: false,
                        style: {
                            color: '#8C97AA',
                            fontSize: '12px'
                        },
                        formatter: function(e) {
                            const arr = e.chart.options.series[0].data[e.pos], name = arr && arr[0];
                            //return `<div class="labels-box"><div class="sort">TOP${e.pos + 1}</div> <span>${e.chart.options.series[0].data[e.pos][0]}</span></p></div>`
                            if(arr && arr[1] <= 0) return ''
                            return `<div class="labels-box"><div class="sort">TOP${e.pos + 1}</div> <span>${name}</span></p></div>`
                        }
                    }
                }],
                tooltip: {
                    enabled: false,
                    valueSuffix: '人'
                },
                labels: {
                    items: [],
                    style: {
                        color: '#8C97AA',
                        fontSize:'12px',
                    }
                },
                resize: 0,
                func(data) {
                    this.charts.xAxis[1].update({
                        labels: {
                            y: data.xAxis[1].labels.y,
                            style: {
                                fontSize: data.xAxis[1].labels.style.fontSize
                            },
                            enabled: data.xAxis[1].labels.enabled
                        }
                    })
                    this.charts.tooltip.update({
                        enabled: this.dataArr.tooltip.enabled
                    })
                },
                series:  []
            },
            dataArr4: {
                drillEnabled: true, // 关闭下钻
                isDrilldown: false,
                isUpdate: 0, // 记录下钻后的数据请求次数，当超过1次，则说明更改了搜索条件，下钻返回时需要重新请求父级地图的数据,
                dateInterval: null,
                series: [] 
            },
            dataArr5: {
                xAxis: [{
                    type: "linear",
                    labels: {
                        useHTML: true,
                        formatter: function(e) {
                            const arr = e.chart.options.series[0].data[e.pos]
                            let name = arr && arr[0];
                            if(arr[1] <= 0) return ''
                            const length = parseInt(name.length)
                            if(length > 6) {
                                name = name.substr(0, 6) + "<br>" + name.substr(6, 6)
                                if(length > 12) name = name + '...'
                            }
                            // return `<div class="labels-box idx${e.pos + 1}"><div class="sort"><i class="i${e.pos + 1}"></i>TOP${e.pos + 1}</div><p>${name}</p></div>`
                            return `<div class="labels-box idx${e.pos + 1}"><p>${name}</p></div>`
                        }
                    },
                    tickInterval: 1
                }],
                dataLabels: true,
                tooltip: {
                    enabled: true,
                    valueSuffix: '次',
                },
                /*
                point: {
                    events: {
                        mouseOver(e) {console.log(e, this)
                            const index = this.index + 1
                            const el = document.querySelector(".labels-box.idx"+index)
                            el.querySelector(".simple").style.opacity = '0'
                            el.querySelector(".fullname").style.opacity = '1'
                        },
                        mouseOut(e) {
                            const index = this.index + 1
                            const el = document.querySelector(".labels-box.idx"+index)
                            el.querySelector(".simple").style.opacity = '1'
                            el.querySelector(".fullname").style.opacity = '0'
                        }
                    }
                },*/
                series:  []
            },
            dataArr6: {
                series:  []
            },
            dataArr7: {
                tooltip: {
                    valueSuffix: ' 次' // 数据列 y 值得后缀字符串
                },
                title: {
                    text: `<span class="highcharts-title-span">客户留资</span>`
                },
                yAxis: {
                    tickAmount: 3,
                },
                markerEnabled: false,
                series:  []
            },
            dataArr8: {
                tooltip: {
                    valueSuffix: ' 次' // 数据列 y 值得后缀字符串
                },
                title: {
                    text: `<span class="highcharts-title-span" style="border-color:#F4B342;">客户预约</span>`
                },
                yAxis: {
                    tickAmount: 3,
                },
                markerEnabled: false,
                series:  []
            },
            dataArr9: {
                tooltip: {
                    enabled: true,
                    valueSuffix: ' 单' // 数据列 y 值得后缀字符串
                },
                title: {
                    text: `<span class="highcharts-title-span" style="border-color:#32E9B8;">会员商城</span>`
                },
                yAxis: {
                    tickAmount: 3,
                },
                dataLabels: false,
                markerEnabled: false,
                series:  []
            },
            dataArr10: {
                tooltip: {
                    enabled: true,
                    valueSuffix: ''
                },
                series:  []
            },
            dataArr11: {
                thousandsSep: true,
                tooltip: {
                    valueSuffix: ' 元' // 数据列 y 值得后缀字符串
                },
                title: {
                    text: `<span class="highcharts-title-span" style="border-color:#32E9B8;">会员商城</span>`
                },
                yAxis: {
                    tickAmount: 3,
                },
                markerEnabled: false,
                series:  []
            },
            dataArr12: [
                {type: 1, label: '累计访问总量', label2: '访问量', prefix: '截止', date: '...', dw: '次', num: 0, seven_days: 0, thirty_days: 0, seven_rate: 0, thirty_rate: 0},
                {type: 2, label: '昨日访问总量', prefix: '', date: '...', dw: '次', num: 0, day: 0, week: 0, month: 0},
                {type: 1, label: '累计企业微信客户总量', label2: '客户量', prefix: '截止', date: '...', dw: '人', num: 0, seven_days: 0, thirty_days: 0, seven_rate: 0, thirty_rate: 0},
                {type: 2, label: '昨日交互客户数', prefix: '', date: '...', dw: '人', num: 0, day: 0, week: 0, month: 0},
                {type: 1, label: '累计客户留资总数', label2: '留资量', prefix: '截止', date: '...', dw: '条', num: 0, seven_days: 0, thirty_days: 0, seven_rate: 0, thirty_rate: 0},
                {type: 2, label: '昨日留资数', prefix: '', date: '...', dw: '条', num: 0, day: 0, week: 0, month: 0}
            ]
        }
    },
    methods: {
        /**
         * @description 路由跳转
         * @param menuCurrent - 父级路由name
         * @param routeName   - 需跳转的路由name
         * @params params     - 路由参数
         */
        handleRedirect(menuCurrent, routeName, params = {}) {
            this.$store.commit('setMenuCurrent', menuCurrent)
            this.$router.push({name: routeName, params: params})
        },
        // 获取请求参数
        getParams(index = 0, dateInterval = null) {
            let datas = this.searchContent[index];
            const typeName = this.getTypeName(index, datas.data_type);

            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
            }
            return [{...datas}, typeName];
        },

        // 获取分类名称
        getTypeName(index = 0, value = null) {
            const arr = this.dataTypeArr[index].value;
            if(Object.prototype.toString.call(arr) !== '[object Array]') {
                return this.dataTypeArr[index].label;
            } else {
                return arr.filter(item => item.value == value)[0].label;
            }
        },

        // 请求接口
        handleRequest(url = "", datas = null) {
            return this.$http.get(url, {params: datas}).then(res => {
                if(res.code == 1) {
                    return res;
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                console.log("error: ", err)
            });
        },

        // 用户分布分类切换
        handleChange() {
            this.getMapData()
        },

        // 获取访问人数
        getVisitsUvData(dateInterval = null, particleSize = "day") {
            const datas = this.getParams(0, dateInterval);
            datas[0].data_type = 1
            datas[1] = this.getTypeName(0, 1)
            this.dataArrUv.dateInterval = dateInterval;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=getMiniStatistic', datas[0])
            .then(res => {
                if(res.data) {
                    this.dataArrUv.particleSize = particleSize;
                    this.dataArrUv.series = [{
                        name: datas[1],
                        color: '#4293F4',
                        data: res.data || [],
                    }];
                }
            })
        },

        // 获取访问次数
        getVisitsPvData(dateInterval = null, particleSize = "day") {
            const datas = this.getParams(0, dateInterval);
            this.dataArrPv.dateInterval = dateInterval;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=getMiniStatistic', datas[0])
            .then(res => {
                if(res.data) {
                    this.dataArrPv.particleSize = particleSize;
                    this.dataArrPv.series = [{
                        name: datas[1],
                        color: '#4293F4',
                        data: res.data || [],
                    }];
                }
            })
        },

        // 获取累计人数
        getAddUpData(dateInterval = null, particleSize = "day") {
            const datas = this.getParams(0, dateInterval);
            datas[0].data_type = 2
            datas[1] = this.getTypeName(0, 2)
            this.dataArr2.dateInterval = dateInterval;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=getMiniStatistic', datas[0])
            .then(res => {
                if(res.data) {
                    getChartMin(res.data, this.dataArr2)
                    this.dataArr2.particleSize = particleSize;
                    this.dataArr2.series = [{
                        name: datas[1],
                        borderRadius: 2,
                        linecolor: '#EEAF42',
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#EEAF42'],
                                [1, 'rgb(11, 31, 66, 0)']
                            ],
                        },
                        data: res.data || [],
                    }];
                }
            })
        },
        
        // 企微客户累计数
        getWechatAllData(dateInterval = null, particleSize = "day") {
            const datas = this.getParams(1, dateInterval);
            this.dataArr10.dateInterval = dateInterval;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=enterpriseWechatUserStatistic', datas[0])
            .then(res => {
                if(res.data) {
                    const newData = [ ...res.data ]
                    newData.sort(compare(1, true)) // 升序排序
                    getChartMin(newData, this.dataArr10)
                    this.dataArr10.particleSize = particleSize;
                    this.dataArr10.series = [{
                        name: datas[1],
                        borderRadius: 2,
                        linecolor: '#31E5B5',
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#31E5B5'],
                                [1, 'rgb(49, 229, 181, 0)']
                            ],
                        },
                        data: res.data || [],
                    }];
                }
            })
        },

        // 企微客户互动人数排名TOP5
        getWechatRankData(dateInterval = null) {
            const datas = this.getParams(2, dateInterval);
            this.dataArr3.dateInterval = dateInterval;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=enterpriseWechatInteractStoreRank', datas[0])
            .then(res => {
                if(res.data) {
                    let colors = [];
                    for(let i = 0; i < 5; i++) {
                        const opacity = 1 - i / 10;
                        colors.push({
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, `rgb(66, 147, 244, ${opacity})`], // #4293F4
                                [1, `rgb(185, 161, 255, ${opacity})`] // #B9A1FF
                            ]
                        })
                    }
                    this.dataArr3.series = [{
                        name: datas[1],
                        colorByPoint: true, // 让每个数据柱自动根据Highcharts 默认的colors 数组颜色来区分
                        borderRadius: 5, // 实现圆角
                        colors,
                        data: res.data.map(item => {
                            return [item.store_name, parseInt(item.num)]
                        }) || [],
                    }];
                    this.$nextTick(() => {
                        // 处理第二组xAxis上的标签数据位置
                        const height = document.querySelector(".video-rank .charts-content").offsetHeight - 51;
                        const diff = parseFloat((height - 110) / 10) + 9.5;
                        this.dataArr3.resize = new Date().getTime();
                        this.dataArr3.xAxis[1].labels.y = -diff;
                        if(height < 90) {
                            this.dataArr3.xAxis[1].labels.enabled = false
                            this.dataArr3.tooltip.enabled = true;
                        } else {
                            this.dataArr3.xAxis[1].labels.enabled = true
                            this.dataArr3.tooltip.enabled = false;
                            if(height < 150) this.dataArr3.xAxis[1].labels.style.fontSize = '11px'
                            else this.dataArr3.xAxis[1].labels.style.fontSize = '12px'
                        }
                    })
                }
            })
        },

        // 获取用户活跃分布数据
        getMapData(dateInterval = null) {
            const datas = this.getParams(3, dateInterval || this.dataArr4.dateInterval), 
                  drilldown = this.dataArr4.isDrilldown;
            if(dateInterval) this.dataArr4.dateInterval = dateInterval;
            if(drilldown) {
                this.dataArr4.isUpdate++;
                datas[0].drill_down = 1
            }
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=getMiniUserPortrait', datas[0])
            .then(res => {
                if(res.data) {
                    this.dataArr4.series = [{
                        name: datas[1],
                        data: res.data || []
                    }];
                    /*
                    // 钻取，以下为测试数据
                    if(drilldown) {
                        this.dataArr4.series = [{
                            name: datas[1],
                            data: [
                                {"name": "杭州", "value": 1}, {"name": "宁波", "value": 53}, {"name": "温州", "value": 6}, {"name": "嘉兴", "value": 28},
                                {"name": "湖州", "value": 79}, {"name": "绍兴", "value": 27}, {"name": "金华", "value": 54}, {"name": "衢州", "value": 66},
                                {"name": "舟山", "value": 12}, {"name": "台州", "value": 84}, {"name": "丽水", "value": 49}
                            ]
                        }];
                    }*/
                }
            })
        },

        // 获取核心数据
        getCoreata(dateInterval = null) {
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=coreStatistics')
            .then(res => {
                if(res.data) {
                    const date = new Date()
                    date.setDate(date.getDate()-1)
                    const _date = `${dateFormatter("MM/DD", date.getTime())} ${getWeek(date.getDay())}`
                    this.dataArr12 = [
                        {...this.dataArr12[0], date: _date, ...res.data.accumulate_visit},
                        {...this.dataArr12[1], date: _date, ...res.data.pv},
                        {...this.dataArr12[2], date: _date, ...res.data.enterprise_wechat_user},
                        {...this.dataArr12[3], date: _date, ...res.data.enterprise_wechat_user_interact},
                        {...this.dataArr12[4], date: _date, ...res.data.accumulate_data_source},
                        {...this.dataArr12[5], date: _date, ...res.data.data_source}
                    ]
                }
            })
        },

        // 商家访问量排名
        getStoreRankData(dateInterval = null) {
            const datas = this.getParams(4, dateInterval);
            this.dataArr5.dateInterval = dateInterval;
            // this.handleRequest('/admin/yt_car/index.php?act=statistic&op=wechatAddStoreRank', datas[0])
            datas[0] = {
                ...datas[0],
                pageSize: 5,
                page: 1,
                sort: 'pv',
                order: datas[0].data_type
            }
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=storeFlowDetail', datas[0])
            .then(res => {
                if(res.data && res.data.list) {
                    // res.data = [res.data[0],res.data[0],res.data[0],res.data[0],res.data[0]]
                    //let dataArr5 = res.data.filter(item => parseInt(item.num) > 0) || []
                    //dataArr5 = dataArr5.length <=0 ? res.data : dataArr5
                    
                    let dataArr5 = []
                    //res.data.list.reverse()
                    res.data.list.forEach((item, index) => {
                        dataArr5.push([item.store_name, parseInt(item.pv)])
                    })
                    this.dataArr5.series = [{
                        name: datas[1],
                        crisp: true,
                        // colorByPoint: true, // 让每个数据柱自动根据Highcharts 默认的colors 数组颜色来区分
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#E1A0FC'],
                                [1, '#45F2EE']
                            ],
                        },
                        data: dataArr5,
                    }];
                }
            })
        },

        // 쎷取客户画像数据
        getPortraitData(dateInterval = null) {
            const datas = this.getParams(5, dateInterval);
            // this.dataArr6.dateInterval = dateInterval;
            // console.log(dateInterval, 'dateInterval')
            // const date1 = new Date(dateInterval[0])
            // const date2 = new Date(dateInterval[1])
            // date1.setDate(date1.getDate()-1)
            // date2.setDate(date2.getDate()-1)
            // console.log(dateFormatter("YYYY-MM-DD", date1.getTime()))
            // console.log(dateFormatter("YYYY-MM-DD", date2.getTime()))
            // dateInterval = [dateFormatter("YYYY-MM-DD", date1.getTime()), dateFormatter("YYYY-MM-DD", date2.getTime())]
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=getMiniActiveUserPortrait', datas[0])
            .then(res => {
                if(res.data && res.data.length > 0) {
                    this.showMsg = false
                    const total = res.data.reduce((sum, item) => {
                        return sum + item[1];
                    }, 0) || 0;
                    if(total == 0) {
                        res.data = res.data.map(item => {
                            item[1] = 0.1;
                            return item;
                        })
                    }
                    const data = []
                    res.data.forEach((item, index) => {
                        if(datas[0].data_type == 1 && ['男', '女'].includes(item.name)) item.name += '性'
                        data.push({name: item.name, y: item.value, z: 110 + 10 * index})
                    })
                    if (datas[0].data_type == 2) {
                        this.dataArr6.showScale = true
                    } else {
                        this.dataArr6.showScale = false
                    }
                    this.dataArr6.series = [{
                        name: datas[1],
                        color: '#4293F4',
                        data,
                    }];
                } else {
                    this.showMsg = true
                }
            })
        },
        // 获取运营数据
        getOperateData(dateInterval = null, particleSize = "day") {
            let datas = this.getParams(6, dateInterval)[0], datas2 = {...datas}, datas3 = {...datas}, datas4 = {...datas};
            this.dataArr7.dateInterval = dateInterval;

            datas.data_type = 3;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=dataSourceSumStatistic', datas)
            .then(res => {
                if(res.data) {
                    this.dataArr7.particleSize = particleSize;
                    this.dataArr7.series = [{
                        name: "客户留资",
                        color: '#4293F4',
                        data: res.data || [],
                    }];
                }
            })
            datas2.data_type = 1;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=estimateStatistic', datas2)
            .then(res => {
                if(res.data) {
                    this.dataArr8.particleSize = particleSize;
                    this.dataArr8.series = [{
                        name: "客户预约",
                        color: '#F4B342',
                        data: res.data || [],
                    }];
                }
            })
            datas3.data_type = 4;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=estimateStatistic', datas3)
            .then(res => {
                if(res.data) {
                    this.dataArr9.particleSize = particleSize
                    this.dataArr9.series = [{
                        name: '兑换量',
                        borderRadius: 2,
                        linecolor: '#32E9B8',
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#2E93C5'],
                                [1, '#32E9B8']
                            ],
                        },
                        data: res.data || [],
                    }];
                }
            })
            datas4.data_type = 5;
            this.handleRequest('/admin/yt_car/index.php?act=statistic&op=pointsOrderAccumulateAmountStatistics', datas4)
            .then(res => {
                if(res.data) {
                    getChartMin(res.data, this.dataArr11)
                    // k M G T P
                    this.dataArr11.particleSize = particleSize;
                    this.dataArr11.series = [{
                        name: "累计金额",
                        color: '#32E9B8',
                        data: res.data || [],
                    }];
                }
            })
        },
        handlePortraitChange() {
            this.getPortraitData()
        },
        handleWechatAddChange() {
            this.getStoreRankData()
        },
        formatter(num) {
            return num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1, ')
            // return formatterNumber(num, 10000, 3, true, true)
        },
        formatter2(num) {
            return formatterNumber(num, 10000, 2, true, true)
        }
    },
    mounted() {
        this.getCoreata()
        this.$store.dispatch('setPageCenterTitle', '元通汽车官方平台BI报表');
        // 清除 el-main 的内边距
        const elMain = document.querySelector(".el-main")
        elMain && (elMain.style.padding = '0px')
        let that = this;
        this.$nextTick(() => {
            window.onresize = function() {
                if(!document.querySelector(".video-rank .charts-content")) return
                const height = document.querySelector(".video-rank .charts-content").offsetHeight - 51;
                const diff = parseFloat((height - 110) / 10) + 9;
                that.dataArr3.resize = new Date().getTime();
                that.dataArr3.xAxis[1].labels.y = -diff;
                if(height < 100) {
                    that.dataArr3.xAxis[1].labels.enabled = false
                    that.dataArr3.tooltip.enabled = true;
                } else {
                    that.dataArr3.xAxis[1].labels.enabled = true
                    that.dataArr3.tooltip.enabled = false;
                    if(height < 140) that.dataArr3.xAxis[1].labels.style.fontSize = '11px'
                    else that.dataArr3.xAxis[1].labels.style.fontSize = '12px'
                }
            }
        })
    },
    destroyed() {
        // 退出组件，恢复内边距，不然会影响到全局
        const elMain = document.querySelector(".el-main")
        elMain && (elMain.style.padding = '')
        this.$store.dispatch('setPageCenterTitle', '');
        this.$store.commit("setMenuCurrent", '')
    }
}
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
    @font-face {
        font-family: 'DIN Condensed Bold';
        //src: url('~@/assets/font/DIN Condensed Bold.eot');
        src: // url('~@/assets/font/DIN Condensed Bold.eot?#iefix') format('embedded-opentype'),
             // url('~@/assets/font/DIN Condensed Bold.woff') format('woff'), 
             // url('~@/assets/font/DIN Condensed Bold.ttf') format('truetype'), 
             url('~@/assets/font/DIN-Condensed.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    .data-details {
        background: #001230;
        color: #fff;
        width: 100%;
        height: 100%;
        padding: 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .charts-box {
            // background: #214886;
            background: #214886;
            box-shadow: 0px 4px 10px #000F28;
            width: 100%;
            height: calc(33.33333333333% - 10px);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
            .charts-search {
                left: 18px;
                top: 48px;
                margin: 0;
                padding: 0;
                width: calc(100% - 36px);
                position: absolute;
                .el-select { 
                    width: 102px; 
                    /deep/.el-input__inner {
                        background: none;
                        border-color:#7BA2E1;
                        color: #fff;
                        font-size: 12px;
                    }
                    /deep/.el-input__icon {
                        color: #7BA2E1;
                        opacity: 0.8;
                    }
                }
                .store-traffic {
                    position: absolute;
                    right: 6px;
                    top: 4px;
                    font-size: 12px;
                    color: #fff;
                    cursor: pointer;
                    &:hover { opacity: 0.8;}
                }
            }
            .visit-type {
                position: absolute;
                left: 22px;
                top: 48px;
                z-index: 3;
                /*
                /deep/.el-select { 
                    width: 112px; 
                    .el-input__inner {
                        padding-left: 24px;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
                */
            }
            .vis1 {
                width: 100%;
                height: 100%;
                position:absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 1;
                opacity: 0;
                transition: opacity .5s;
                &.visible {
                    opacity: 1;
                    z-index: 2;
                }
            }
            /deep/.labels-box {
                text-align: center;
                z-index: 1;
                .sort {
                    height: 26px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    line-height: 100%;
                    z-index: 1;
                    i {
                        height: 24px;
                        margin:0 2px 4px 0;
                        z-index: 1;
                    }
                    .i1, .i2, .i3 {
                        width: 24px;
                        background-image: url('~@/assets/images/icon_medal.jpg');
                        background-repeat: no-repeat;
                        background-size: 100%;
                        display: inline-block;
                        background-position: center 0px;
                    }
                    .i2 {
                        background-position: center -24px;
                    }
                    .i3 {
                        background-position: center -48px;
                    }
                }
                p {
                    width: 100%;
                   // overflow: hidden;
                    //text-overflow: ellipsis;
                   // white-space: nowrap;
                    font-size: 12px;
                    position: relative;
                    text-align: center;
                }
            }
            .charts-title {
                font-weight: bold;
                font-size: 16px;
                padding: 15px 20px;
                display: block;
                position: relative;
                overflow: hidden;
                .icon {
                    width: 1.1em;
                    height: 1.1em;
                    vertical-align: -0.16em;
                }
                .charts-date-type {
                    position: absolute;
                    top: 10px;
                    right: 12px;
                }
            }
            .charts-content {
                padding: 5px 12px 0 12px;
                width: 100%;
                box-sizing: border-box;
                height: calc(100% - 56px);
                cursor: pointer;
                .charts-content-box { 
                    position: relative;
                    .charts-radio-group {
                        right: 0px;
                        top: 2px;
                        z-index: 999;
                    }
                }
            }
            &.visits {
                .charts-content {
                    margin-top: 34px;
                    height: calc(100% - 90px)
                }
            }
            &.wechat-add {
                .charts-content {
                    height: calc(100% - 46px)
                }
            }
            &.core-data {
                // background: none;
                box-shadow: none;
                height: calc(66.66666666% - 6px);
                position: relative;
                //.charts-content {
                    // height: calc(100% - 40px);
                //}
                .core-data-content {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    width: 100%;
                    padding: 0 7px 58px;
                    margin-top: -6px;
                    height: 100%;
                    box-sizing: border-box;
                }
                .core-data-item {
                    width: calc(50% - 14px);
                    height: calc(33.3333% - 14px);
                    margin: 7px;
                    border: 1px solid #355B98;
                    font-size: 14px;
                    padding: 10px 14px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    color: #7BA2E1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    position: relative;
                }
                .core-data-item__label {
                    color: #C2E0FF;
                    font-size: 16px;
                    margin-bottom: 3px;
                    font-weight: bold;
                }
                .core-data-item__date {
                    font-size: 13px;
                }
                .core-data-item__content {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 4px 14px 8px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    &.type-1 {
                        flex-direction: column;
                        align-items: space-between;
                    }
                    &.type-2 {
                        align-items: flex-end;
                    }
                }
                .item-total {
                    font-size: 20px;
                    color: #C2E0FF;
                    // font-family: 'DIN Condensed Bold';
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: normal;
                    /deep/font {
                        font-size: 12px;
                        color: #7BA2E1;
                        &:first-child {
                            margin-left: 4px;
                        }
                    }
                }
                .type-1 .item-date-list {
                    // padding-top: 2%;
                    display: flex;
                    justify-content: space-between;
                    overflow: hidden;
                    .item-date-list-box {
                        width: 96px;
                        div {
                            width: 100%;
                            display: flex;
                            margin: 2px 0;
                            justify-content: space-between;
                            span:first-child {
                                width: 40%;
                                overflow:hidden;
				                white-space: nowrap;
				                text-overflow: ellipsis;
				                -o-text-overflow:ellipsis;
                            }
                            span:last-child {
                                color: #33EBB9;
                                &.color-danger {
                                    color: #FF8888;
                                }
                            }
                        }
                        &:first-child {
                            flex-grow: 1;
                            padding-right: 5%;
                            max-width: 200px;
                            div span:first-child {
                                width: 60%;
                                overflow:hidden;
				                white-space: nowrap;
				                text-overflow: ellipsis;
				                -o-text-overflow:ellipsis;
                            }
                            div span:last-child {
                                width: 58px;
                                text-align: right;
                                overflow:hidden;
				                white-space: nowrap;
				                text-overflow: ellipsis;
				                -o-text-overflow:ellipsis;
                            }
                        }
                    }
                }
                .type-2 .item-total { 
                    width: 28%;
                    min-width: 70px;
                    overflow:hidden;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    -o-text-overflow: ellipsis;
                }
                .type-2 .item-date-list {
                    flex-grow: 1;
                    max-width: 166px;
                    overflow: hidden;
                }
                .type-2 .item-date-list div {
                    margin: 2px 0;
                    display: flex;
                    justify-content: space-between;
                    span:first-child {
                        width: 60%;
                        overflow:hidden;
				        white-space: nowrap;
				        text-overflow: ellipsis;
				        -o-text-overflow: ellipsis;
                    }
                    span:last-child {
                        width: 58px;
                        color: #33EBB9;
                        text-align: right;
                        &.color-danger {
                            color: #FF8888;
                        }
                    }
                }
            }
            &.video-rank {
                .charts-content {
                    height: calc(100% - 46px);
                }
            }
            &.portrait {
                .charts-content {
                    padding: 0;
                }
            }
            &.operate {
                height: calc(66.66666666% - 6px);
                .charts-content {
                    height: calc(31%);
                    &-box {
                        height: 100%;
                    }
                }
            }
        }
    }
    .data-left, .data-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(28% - 10px);
        height: 100%;
    }
    .data-middle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(44% - 11px);
        height: 100%;
    }
    .charts-radio-group /deep/ {
        position: absolute;
        right: 118px;
        top: 10px;
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background: none;
            border: none;
            color:#9FCBFF;
            box-shadow: none;
        }
        .el-radio-button__inner {
            background: none;
            border: none;
            color: #6682AB;
            padding: 9px 7px;
            font-size: 14px;
        }
        .el-radio-button:first-child .el-radio-button__inner {
            border: none;
        }
        .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
            box-shadow: none;
        }
    }
    .errorMsg {
        position: absolute;
        color: #7BA2E1;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
        text-align: center;
        padding: 0 40px 10px;
        font-size: 12px;
        background: #214886;
    }
</style>
<style lang="scss">
    .el-select-dropdown.popper-class {
        border: 1px solid #7BA2E1;
        background-color: #214886;
        .popper__arrow {
            border-bottom-color: #214886;
        }
        .popper__arrow::after {
            top: 0px;
            border-bottom-color: #7BA2E1;
        }
        .el-select-dropdown__item {
            color: #7BA2E1;
            font-size: 12px;
            &.selected {
                color: #fff;
                background: none;
                font-weight: normal;
            }
            &.hover {
                background: none;
            }
            &:hover {
                color: #fff;
            }
        }
    }
    .bi-tooltip div {
        line-height: 180%;
        font-size: 16px;
        padding: 5px 14px
    }
</style>